<template>
	<view class="stepBar">
		<view v-for='item in list' :style="{'background': item}"></view>
	</view>
</template>

<script lang="ts" setup>
// import step from 'vant/lib/step';
import { onMounted, ref } from 'vue';
	 const props =  defineProps({
		step: Number
	})
	const list  = ref<string[]>([])
	onMounted(()=>{
		// console.log(props.step)
		if(props.step===1){
			list.value = ['#07ceba', '#ffffff', '#ffffff', '#ffffff']
		}else if(props.step === 2){
			list.value = ['#07ceba', '#07ceba', '#ffffff', '#ffffff']
		}else if(props.step === 3){
			list.value = ['#07ceba', '#07ceba', '#07ceba', '#ffffff']
		}else{
			list.value = ['#07ceba', '#07ceba', '#07ceba', '#07ceba']
		}
	})

</script>

<style lang="scss" scoped>
	.stepBar{
		margin-left: 40px;
		width: 188px;
		margin-top: 16px;
		height: 6px;
		display: flex;
		justify-content: space-between;
		view{
			width: 40px;
			height: 100%;
			background: white;
		}
	}
	uni-view{
			flex-direction: row!important;
		}
</style>
